<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box{
            width: 100px;
            height: 2000px;
            background: red;
        }
    </style>
</head>
<body>
    <!-- <div class="box"></div> -->
    <input class="myinput" type="text" />
    <script>
        // 一、浏览器事件 
        // 1.等待dom和资源加载完毕的时候执行  
        // window.onload = function(){
        //     console.log("加载");
        // }
        // 2.onresize ： 浏览器大小改变的时候触发
        // window.onresize = function(){
        //     console.log("123");
        // }


        // 3.onscroll:页面滚动的时候触发;
            // window.onscroll = function(){
            //     // console.log("滚了");
            //     console.log(document.documentElement.scrollTop);
            // }

            // 二、表单事件 
            // 1.表单内容改变的时候触发 change 且需要失去焦点；
            // var myInputEle = document.querySelector(".myinput");
            // myInputEle.onchange = function(){
            //     console.log(this.value);
            // }
            // 2.表单输入的时候触发事件 input
            // var myInputEle = document.querySelector(".myinput");
            // myInputEle.oninput = function(){
            //     console.log(this.value);
            // }
            // 3.聚焦的时候触发事件focus
            // var myInputEle = document.querySelector(".myinput");
            // myInputEle.onfocus = function(){
            //     console.log("聚焦了");
            // }
            // 4.失去焦点的时候触发事件 blur
            // var myInputEle = document.querySelector(".myinput");
            // myInputEle.onblur = function(){
            //     console.log("失去焦点");
            // }


    </script>

</body>
</html>